<script setup>
import { defineEmits, defineProps, watch, onMounted, onUnmounted, ref, computed } from 'vue';
import { debounce } from 'lodash';

const textareaRef = ref(null);
const rows = ref(1);
const emit = defineEmits(['update:modelValue', 'clickIcon', 'focus', 'blur', 'keyup']);
const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  label: {
    type: String,
    default: ''
  },
  placeholder: {
    type: String,
    default: ''
  },
  tip: {
    type: String,
    default: ''
  },
  icon: {
    type: Boolean,
    default: false
  },
  warn: {
    type: Boolean,
    default: false
  },
  readonly: {
    type: Boolean,
    default: false
  },
  border: {
    type: Boolean,
    default: true
  },
  type: {
    type: String,
    default: 'text'
  },
  size: {
    type: Number,
    default: 16
  },
  tipColor: { type: String, default: '#68acf4' }
});
// 确保 fontSize 值去掉单位 'px'
const tipSize = computed(() => `${Math.max(props.size - 4, 10)}px`);
const titleSize = computed(() => `${Math.max(props.size, 10)}px`);
const contentSize = computed(() => `${props.size}px`);
// 参考vant组件库中的field组件
const adjustTextareaSize = () => {
  const { value: textarea } = textareaRef; // 修改这里，使用解构赋值
  if (!textarea) return;
  textarea.style.height = 'auto';
  const height = textarea.scrollHeight;
  requestAnimationFrame(() => {
    if (height) {
      textarea.style.height = Math.max(height, 30) + 'px';
    }
  });
};

const debouncedAdjust = debounce(adjustTextareaSize, 100);

const handleChange = (e) => {
  emit('update:modelValue', e.target.value);
  adjustTextareaSize();
};

watch(
  () => props.modelValue,
  () => debouncedAdjust()
);

onMounted(() => {
  window.addEventListener('resize', adjustTextareaSize);
  adjustTextareaSize();
});

onUnmounted(() => {
  window.removeEventListener('resize', adjustTextareaSize);
});
</script>

<template>
  <div class="component">
    <div class="editext" v-if="label">
      <div class="left_warn">
        <div v-if="warn" class="warn">*</div>
      </div>
      <span class="title" :style="{ fontSize: titleSize }">
        {{ label }}
        <span v-if="tip" :style="{ fontSize: tipSize, color: tipColor }">({{ tip }})</span>
      </span>
    </div>
    <textarea
      v-if="!readonly || modelValue.length > 0"
      class="textarea"
      ref="textareaRef"
      :class="[{ dis_read: !readonly, read: readonly }]"
      :rows="rows"
      :readonly="readonly"
      :value="modelValue"
      :placeholder="readonly ? '' : placeholder"
      @input="handleChange"
      :style="{ fontSize: contentSize }"
    />
    <div class="border_bottom" style="margin-top: 5px" v-if="border"></div>
  </div>
</template>
<style scoped lang="less">
.component {
  width: 100%;
  position: relative;

  .editext {
    display: flex;
    align-items: center;
    margin-top: 3px;

    .left_warn {
      width: 10px;
      display: inline-flex;
      justify-content: center;
      align-items: center;

      .warn {
        color: red;
        font-size: 25px;
        padding-top: 10px;
      }
    }

    .title {
      display: flex;
      align-items: center;
      font-size: var(--font-size-base);
    }
  }

  .textarea {
    width: 96%;
    min-height: 30px;
    margin-top: 3px;
    margin-left: 2%;
    padding-top: 7px;
    padding-left: 10px;
    padding-right: 10px;
    border: none;
    resize: none;
    outline: none;
    border-radius: 5px;
    color: var(--font-color);
    transition:
      background-color 0.3s ease,
      color 0.3s ease; // 添加过渡效果
  }

  .textarea::placeholder {
    color: var(--font-color);
    font-size: var(--font-size-base);
  }

  .dis_read {
    text-align: start;
    background: var(--bg-input);
  }

  .read {
    text-align: start;
    background: var(--bg-color);
  }

  .tip {
    color: var(--u-tips-color);
  }
}
</style>
